<template>
	<div class="generalTable">
    <div class="btn-options">
      <el-button type="primary" :loading="entriesLoading" @click="exportEntriesClick">
        Download Entries<i class="el-icon-download"></i>
      </el-button>
    </div>
		<el-table class="table" v-loading="loading" :data="list"
							stripe
							border fit
							style="width: 100%"
              @selection-change="handleSelectionChange"
              :row-key="getRowKeys"
              selectRow>
      <el-table-column
          :reserve-selection="true"
          prop="id"
          type="selection"
          align="center"
          width="55">
      </el-table-column>
			<el-table-column
					v-for="(n , idx) in columns"
					align="center"
					:label="n.name"
					:prop="n.field"
					:key="idx">
				<template slot-scope="scope">
					<el-popover
							placement="top-start"
							trigger="hover"
							popper-class="popView"
							:content="scope.row[n.field]+''">
						<div slot="reference"> {{ getNotNullValue(scope.row[n.field]) }}</div>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination" v-show="list.length > 0">
			<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNum"
					:page-sizes="[10, 20, 30, 40, 50]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
  import {isEmpty} from "@/utils/validate";
  import {export_txt_to_zip} from "@/vendor/Export2Zip";

  export default {
    name: "generalTable",
		props: ['loading', 'list', 'total', "columns"],
		data() {
      return {

        pageNum: 1,
        pageSize: 10,

        getRowKeys(row) {
          return row.id
        },
        entriesLoading: false,
        // 选中数组
        ids: [],
        selecSelections: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
      }
		},
		methods: {

      async exportEntriesClick() {
        if (this.selecSelections.length == 0) {
          alert("Please check and download data")
          // this.$message.warning("Please check and download data")
          return
        }
        this.entriesLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = []
          const filterVal = []
          const dataList = this.selecSelections
          this.columns.map(n => {
            tHeader.push(n.name)
            filterVal.push(n.field)
          })

          const data = this.formatJson(filterVal, dataList)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "lncRNA_miRNA_entries"
          })
          this.entriesLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        let str = jsonData.map(v => filterVal.map(j => {
          if (j === 'sequence') {
            return `>${v.transcriptId}\n` + v[j]
          }
          return v[j]
        }))
        return str
      },
      getNotNullValue(n) {
        if (isEmpty(n)) {
          return '-'
        }
        return n
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.pageNum = 1
        this.$emit("refreshData", this.pageNum, this.pageSize)
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.$emit("refreshData", this.pageNum, this.pageSize)
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selecSelections = selection
        // this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
		}
  }
</script>

<style lang="stylus" scoped>

.btn-options {
  margin-bottom 15px
  display flex
  justify-content flex-end
}

.el-button--primary /deep/{
  background-color: #0064bc;
  border-color: #0064bc;
span , i{
  font-weight 700
}
i {
  margin-left  5px
}
margin-left 15px
}

	.generalTable {

		.el-table /deep/ {
			.download {
				width 30px
				cursor pointer
			}

			.b {
				cursor pointer
				color #0a2458
			}

			.b:hover {
				text-decoration underline
				color #0064bc
			}

			.cell {
				font-weight 800
				overflow: hidden; //超出隐藏
				text-overflow: ellipsis; //超出文本设置为...
				display: -webkit-box; //将div1转换为盒子模型
				-webkit-line-clamp: 2; //设置div1的文本为2行
				-webkit-box-orient: vertical; //从顶部向底部垂直布置子元素
			}

			.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
				background-color: #0064bc;
				border-color: #0064bc;
			}

			.el-checkbox__label {
				color #11427D;
			}

			th {
				background-color: #11427D;
				color: #fff
				font-size 14px

				div {
					word-break: break-word;
				}
			}

			//设置图标颜色
			.el-loading-spinner .path {
				stroke: #11427D;
			}
		}

		.pagination /deep/ {
			padding-top 20px
			text-align center

			.el-pagination.is-background .el-pager li:not(.disabled).active {
				background-color: #11427DFF;
				color: #FFF;
			}
		}

	}

</style>
